@load 用在圖片標籤時

• image src 有值的时候，才會開始加載
• onload 事件是在 src 的資源加載完畢的時候，才會觸發

<img src="showImg.png" @load="isLoad">

methods:{
    isLoad(){
        console.log('資料加載完畢')
    }
}

實際製作圖片的預設圖

template

<div class="loading-image">
    <img @load="successLoadImg" v-bind:src="spot.Picture.PictureUrl1" alt="載入圖片">
</div>

style

.loading-image{
    height: 100%;
    position: relative;
    background-color: #FFF;
    background-image: url(../src/assets/loading.png);
    background-repeat: no-repeat;
    background-size: 100%;
    &.hide{
        display: none;
    }
}

js
利用 prototype 設定全局函式，可以重複使用。

Vue.prototype.successLoadImg = function (event){
    event.target.parentElement.classList.add('hide');
    document.querySelectorAll(".loading-image.hide").forEach(e => e.remove())
};

參考來源：
https://blog.csdn.net/muzidigbig/article/details/115167044
https://www.itread01.com/article/1489633818.html